<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 权限列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="()=>this.editVisible=true" v-if="hasPermission('authority:add')">添加权限
                </el-button>
            </div>
            <el-table
                    :data="authorities.filter(authority=>authority.isDeleted===0)"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"

            >
                <el-table-column label="ID" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.row.systemAuthorityId}}
                    </template>
                </el-table-column>
                <el-table-column label="权限代码">
                    <template slot-scope="scope">
                        {{scope.row.permission}}
                    </template>
                </el-table-column>
                <el-table-column label="权限描述">
                    <template slot-scope="scope">
                        {{scope.row.description}}
                    </template>
                </el-table-column>

                <el-table-column label="所属菜单">
                    <template slot-scope="scope">
                        {{scope.row.menuName}}
                    </template>
                </el-table-column>
                <el-table-column label="所属菜单">
                    <template slot-scope="scope">
                        {{scope.row.menuCode}}
                    </template>
                </el-table-column>


                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                style="color: red"
                                class="red"
                                @click="handleDelete(scope.row.systemAuthorityId)"
                                v-if="hasPermission('authority:delete')"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageNum"
                        :page-size="8"
                        :total="total"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>

            <el-dialog title="添加权限" :visible.sync="editVisible" width="45%" label-position="left" label-width="150px"
                       size="small">
                <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                    <el-form-item label="菜单代码" prop="menuCode">
                        <el-input placeholder="菜单代码" v-model="form.menuCode" style="width: 70%;"
                                  :value="form.menuCode"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单名" prop="menuName">
                        <el-input placeholder="菜单名" v-model="form.menuName" style="width: 70%;"
                                  :value="form.menuName"></el-input>
                    </el-form-item>
                    <el-form-item label="权限代码" prop="permission">
                        <el-input placeholder="权限代码" v-model="form.permission" style="width: 70%;"
                                  :value="form.permission"></el-input>
                    </el-form-item>
                    <el-form-item label="权限描述" prop="description">
                        <el-input placeholder="权限描述" v-model="form.description" style="width: 70%;"
                                  :value="form.description"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="addAuthority">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import { addAuthority, deleteAuthority, getAllAuthority } from '../../api/authority';
    import { hasMenu, hasPermission, permissionListContain } from '../../utils/authority';

    export default {
        name: 'Authority',

        created() {
            this.fetchData(1);
        },
        data() {
            return {
                authorities: [],
                total: 0,
                editVisible: false,
                pageNum: 1,
                rules: {
                    menuCode: [{ required: true, message: '菜单代码不能为空', trigger: 'blur' }],
                    menuName: [{ required: true, message: '菜单名不能为空', trigger: 'blur' }],
                    permission: [{ required: true, message: '权限代码不能为空', trigger: 'blur' }],
                    description: [{ required: true, message: '权限描述不能为空', trigger: 'blur' }]
                },
                form: {
                    permission: '',
                    menuCode: '',
                    menuName: '',
                    description: ''
                }
            };
        },
        methods: {
            handlePageChange(pageNum) {
                this.fetchData(pageNum);
            },
            permissionContain(permissionList) {
                return permissionListContain(permissionList);
            },
            hasPermission(permission) {
                return hasPermission(permission);
            },
            hasMenu(menuCode) {
                return hasMenu(menuCode);
            },
            handleDelete(authorityId) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        deleteAuthority({
                            authorityId: authorityId
                        }).then(res => {
                            if (res.data.resultCode === 204) {
                                this.$message.success('删除成功');
                                this.fetchData();
                            } else {
                                this.$message.error('删除失败');
                            }
                        });

                    })
                    .catch(() => {
                    });
            },
            fetchData(pageNum) {
                getAllAuthority({
                    pageNum: pageNum,
                    pageSize: 8
                }).then(res => {
                    this.total = res.data.data.total;
                    this.pageNum = pageNum;
                    this.authorities = res.data.data.list;
                });
            },


            addAuthority() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        addAuthority(JSON.stringify(this.form)).then(res => {
                            if (res.data.resultCode === 201) {
                                this.$message.success('添加成功');
                                this.form = {
                                    permission: '',
                                    menuCode: '',
                                    menuName: '',
                                    description: ''
                                };
                                this.editVisible = false;
                            } else {
                                return false;
                            }
                        });
                    }
                });
            }


        }
    };
</script>

<style scoped>

</style>
